<template>
    <div>
        <header class="resviseTop">
            <img src="../../images/left.png" alt="" @click="$router.back(-1)">
            <span class="resvise_title">{{ titleHead }}</span>
        </header>
        <div class="bg_clock">
            <div class="binding_box" v-for="arr in consumersTab" @click="details(arr.consumer_id, arr.remark)">
                <div class="binding_flex">
                    <div>
                        <img src="../../img_myself/tao.png" alt="">
                        <span>{{arr.login}}</span>
                    </div>
                    <div>
                        <img :src="taoDengji_img[arr.level -1]" alt="" class="level-icon">
                        <img src="../../img_myself/right.png" alt="" class="rightic">
                    </div>
                </div>
                <div class="binding_title">{{arr.status.text}}</div>
            </div>
        </div>
        <!--背景颜色-->
        <div class="fixed_color"></div>
        <div class="bottom_banner" v-if="If_tao==1">
            <div>已绑定3个买手账号</div>
        </div>
        <div class="bottom_banner" v-else-if="If_tao==0" @click="details(0)">
            <div class="addTao">{{ titleHead }}</div>
        </div>
    </div>
</template>

<script>
    import api from '../../utils/api';
    import axios from 'axios'

    export default {
        name: "bindingTao",
        data: () => ({
            If_tao: 0,
            consumersTab: [],
            message: 0,
            taoDengji_img: [
                require('@/img_myself/s_red_1.gif'),
                require('@/img_myself/s_red_2.gif'),
                require('@/img_myself/s_red_3.gif'),
                require('@/img_myself/s_red_4.gif'),
                require('@/img_myself/s_red_5.gif'),

                require('@/img_myself/s_blue_1.gif'),
                require('@/img_myself/s_blue_2.gif'),
                require('@/img_myself/s_blue_3.gif'),
                require('@/img_myself/s_blue_4.gif'),
                require('@/img_myself/s_blue_5.gif'),

                require('@/img_myself/s_crown_1.gif'),
                require('@/img_myself/s_crown_2.gif'),
                require('@/img_myself/s_crown_3.gif'),
                require('@/img_myself/s_crown_4.gif'),
                require('@/img_myself/s_crown_5.gif'),
            ],
            titleHead: '绑定任务号'
        }),
        methods: {
            details: function (inx, remark = false) {
                if (inx == 0) {         //添加任务号
                    var tableng = 0
                    for (let i in this.consumersTab) {
                        if (this.consumersTab[i].status.val != 2) {
                            tableng++
                        }
                    }
                    if (this.consumersTab.length >= this.message) {
                        this.$toast('已达到最大绑定数')
                        return false;
                    }
                    this.$router.push({
                        name: 'detailsTao',
                        params: {
                            add_Tao: 0,
                            platform_id: this.$route.query.platform_id,
                            title: this.$route.query.title,
                            platform_tag: this.$route.query.platform_tag
                        }
                    })
                } else {   //查看详情
                    this.$router.push({
                        name: 'detailsTao',
                        params: {
                            add_Tao: inx,
                            remark: remark,
                            platform_id: this.$route.query.platform_id,
                            title: this.$route.query.title,
                            platform_tag: this.$route.query.platform_tag
                        }
                    })
                }
            }
        },
        mounted() {
            document.body.scrollTop = 0;
        },
        async created() {
            this.titleHead = '绑定' + this.$route.query.title + '任务号';


            let consumers = await api.request('/consumers', 'get', {platform_id: this.$route.query.platform_id})
            this.consumersTab = consumers.data.data;
            this.message = consumers.data.message
        }
    }
</script>

<style scoped="css">
    @import "../../style/bindingTao.css";
</style>
